<template>
  <div class="table">
    <div class="table-main">
      <div class="search-item">
        <!-- <span class="select-text">请选择年份：</span> -->
        <el-date-picker
          size="small"
          v-model="year"
          format="yyyy 年"
          value-format="yyyy"
          type="year"
          placeholder="选择年份"
        ></el-date-picker>
        <el-button style="margin-left:30px" type="primary" size="small" @click="search">确定</el-button>
        <el-col>
          <el-button
            style="float:right"
            type="success"
            icon="el-icon-download"
            @click="outexcelbtn"
            size="small"
          >导出Excel</el-button>
        </el-col>
      </div>
      <div class="table-title-box">
        <h1 class="table-title">成都商标受理窗口业务受理量汇总表</h1>
        <p class="tabel-title-txt">所属日期：{{Tyear}}年度</p>
      </div>
      <el-table
        :data="tableData"
        class="table-content"
        :border="true"
        stripe
        :fit="true"
        :cell-style="{'text-align':'center'}"
        :header-cell-style="{'text-align':'center','color':'#666'}"
        :header-row-style="{'background':'red'}"
        max-height="600px"
        show-summary
      >
        <el-table-column prop="months" label="月份" fixed></el-table-column>
        <el-table-column prop="classid1" label="商标申请"></el-table-column>
        <el-table-column prop="classid23" label="质权登记"></el-table-column>
        <el-table-column label="商标后续" align="center">
          <el-table-column prop="classid2" label="变更申请人" width="80"></el-table-column>
          <el-table-column prop="classid3" label="续展" width="80"></el-table-column>
          <el-table-column prop="classid4" label="转让" width="80"></el-table-column>
          <el-table-column prop="classid5" label="更正" width="80"></el-table-column>
          <el-table-column prop="classid6" label="许可备案" width="80"></el-table-column>
          <el-table-column prop="classid7" label="撤回注册" width="80"></el-table-column>
          <el-table-column prop="classid8" label="补发证书" width="80"></el-table-column>
          <el-table-column prop="classid9" label="变更代理人" width="80"></el-table-column>
          <el-table-column prop="classid10" label="变更许可人" width="80"></el-table-column>
          <el-table-column prop="classid11" label="补发变更" width="80"></el-table-column>
          <el-table-column prop="classid12" label="撤回变更代理人" width="80"></el-table-column>
          <el-table-column prop="classid13" label="撤回变更申请人" width="80"></el-table-column>
          <el-table-column prop="classid14" label="撤回删减商品" width="80"></el-table-column>
          <el-table-column prop="classid15" label="撤回许可备案" width="80"></el-table-column>
          <el-table-column prop="classid16" label="撤回续展" width="80"></el-table-column>
          <el-table-column prop="classid17" label="撤回注销" width="80"></el-table-column>
          <el-table-column prop="classid18" label="撤回转让" width="80"></el-table-column>
          <el-table-column prop="classid19" label="注销" width="80"></el-table-column>
          <el-table-column prop="classid20" label="终止备案" width="80"></el-table-column>
          <el-table-column prop="classid21" label="优先权" width="80"></el-table-column>
          <el-table-column prop="classid22" label="删减商品" width="80"></el-table-column>
        </el-table-column>
        <el-table-column prop="classid24" label="马德里注册" width="120"></el-table-column>
        <!-- <el-table-column label="合计"></el-table-column> -->
      </el-table>
    </div>

    <!-- <el-pagination
      class="pagination"
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-sizes="[10, 20, 30]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination> -->
  </div>
</template>
<script>
import { Message, MessageBox } from "element-ui";
import { excelNetwork } from "../../api/datastac";
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 0,

      brchid: "", // 网点代码
      year: "",
      Tyear: "", // 副标题年份

      tableData: [
        {
          classid1: "",
          classid2: "",
          classid3: "",
          classid4: "",
          classid5: "",
          classid6: "",
          classid7: "",
          classid8: "",
          classid9: "",
          classid10: "",
          classid11: "",
          classid12: "",
          classid13: "",
          classid14: "",
          classid15: "",
          classid16: "",
          classid17: "",
          classid18: "",
          classid19: "",
          classid20: "",
          classid21: "",
          classid22: "",
          classid23: "",
          classid24: "",
          dept_name: "",
          months: "",
        },
      ],
    };
  },
  computed: {
    bgdate() {
      return `${this.year}-01-01`;
    },
    eddate() {
      return `${this.year}-12-31`;
    },
  },

  methods: {
    //每页显示的条数
    handleSizeChange(val) {
      // 当前页码
      this.pageSize = val;
      // 重新渲染表格数据
      this.getTabData();
    },
    // 页数切换
    handleCurrentChange(val) {
      // 当前页码
      this.currentPage = val;
      // 重新渲染表格数据
      this.getTabData();
    },
    // 查询确定按钮
    search() {
      if (!this.year) {
        return this.$message.warning("请选择要查询的年份");
      }
      this.Tyear = this.year;
      this.getTabData();
    },

    // 导出Excel
    outexcelbtn() {
      // console.log(this.bgdate, this.eddate);
      let data = new FormData();
      data.append("bgdate", this.bgdate); // 年头
      data.append("eddate", this.eddate); // 年尾

      MessageBox.confirm("此操作将导出Excel, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          excelNetwork(data).then((res) => {
            // console.log(res);
            //此处有个坑。这里用content保存文件流，最初是content=res，但下载的test.xls里的内容如下图1，
            //检查了下才发现，后端对文件流做了一层封装，所以将content指向res.data即可
            //另外，流的转储属于浅拷贝，所以此处的content转储仅仅是便于理解，并没有实际作用=_=
            const content = res.data;
            const blob = new Blob([content]); //构造一个blob对象来处理数据
            const fileName = "商标受理窗口业务受理量汇总表.xls";
            //对于<a>标签，只有 Firefox 和 Chrome（内核） 支持 download 属性
            //IE10以上支持blob但是依然不支持download
            if ("download" in document.createElement("a")) {
              //支持a标签download的浏览器
              const link = document.createElement("a"); //创建a标签
              link.download = fileName; //a标签添加属性
              link.style.display = "none";
              link.href = URL.createObjectURL(blob);
              document.body.appendChild(link);
              link.click(); //执行下载
              URL.revokeObjectURL(link.href); //释放url
              document.body.removeChild(link); //释放标签
            } else {
              //其他浏览器
              navigator.msSaveBlob(blob, fileName);
            }
          });
        })
        .catch(() => {
          Message({
            type: "info",
            message: "已取消导出",
          });
        });
    },

    // 表格数据获取
    getTabData() {
      this.$http
        .get("/trademark/report/brchNetwork", {
          params: {
            brchid: this.brchid, // 网点代码
            bgdate: this.bgdate, // 年头
            eddate: this.eddate, // 年尾
            pageSize: this.pageSize, // 页尺寸
            pageNum: this.currentPage, // 页码
          },
        })
        .then((res) => {
          if (res.data.code != 200) return this.$message.error("查询不到");
          let data = res.data.data;
          data ? (this.tableData = data) : ""; // 返回后端数据
        })
        .catch((error) => {});
    },
  },
  created() {
    this.year = String(new Date().getFullYear());
    this.Tyear = this.year;
    this.getTabData();
  },
};
</script>
<style lang="less" scoped>
.table {
  /deep/.has-gutter .cell {
    text-align: center;
  }
  .table-main {
    .table-title-box {
      text-align: center;
      margin-top: 20px;
      .table-title {
        font-size: 28px;
      }
      .tabel-title-txt {
        color: #777;
        font-size: 14px;
        padding: 10px 0;
      }
    }
    .table-content {
      width: 100%;
      font-size: 14px;
    }
  }
  .pagination {
    text-align: center;
    margin: 30px 0;
  }
  
}
.el-input__prefix{
  border: 1px solid #000;
}
.el-table__footer tbody tr td {
  background-color: rgba(64, 158, 255, 0.2);
}
</style>
